<template>
  <view class="page-pwd">
    <view class="header">
      <view class="title">{{ $t('mine.昵称') }}</view>
      <uni-icons type="left" color="#ffffff" size="24" class="back-icon" @click="handleBack"></uni-icons>
    </view>
    <uni-forms ref="form" :value="user" labelWidth="80px" class="form">
      <uni-forms-item name="nickname" :label="$t('mine.昵称')">
        <uni-easyinput type="txt" v-model="user.nickname" :placeholder="$t('mine.请输入昵称')" />
      </uni-forms-item>
      <button type="primary" @click="submit" class="btn">{{ $t('mine.提交') }}</button>
    </uni-forms>
  </view>
</template>

<script>
  import { getInfo } from '@/api/login'
  import { uploadNickname } from '@/api/system/user'

  export default {
    onShow() {
      this.getUserInfo()
    },
    data() {
      return {
        user: {
          nickname: ''
        },
        rules: {
          nickname: {
            // rules: [
            //   {
            //     required: true,
            //     errorMessage: this.$t('mine.昵称不能为空')
            //   }
            // ]
          }
        }
      }
    },
    onPullDownRefresh() {
      this.getUserInfo()
      uni.stopPullDownRefresh()
    },
    onReady() {
      this.$refs.form.setRules(this.rules)
    },
    methods: {
      getUserInfo() {
        this.$modal.loading('loading', 'loading')
        getInfo()
          .then((res) => {
            this.$modal.closeLoading()
            this.user.nickname = res.result?.data?.nickname || ''
          })
          .catch(() => {
            this.$modal.closeLoading()
          })
      },
      // 返回
      handleBack() {
        // this.$tab.navigateBack()
        this.$tab.navigateTo('/pages/mine/setting/index')
      },
      //提交
      submit() {
        this.$modal.loading('loading', 'loading')
        this.$refs.form.validate().then((res) => {
          uploadNickname({
            nickname: this.user.nickname
          })
            .then((response) => {
              this.$modal.closeLoading()
              this.$modal.msgSuccess(this.$t('mine.修改成功'))
              this.handleBack()
            })
            .finally(() => {
              this.$modal.closeLoading()
            })
        })
      }
    }
  }
</script>

<style lang="scss" scoped>
  .page-pwd {
    position: relative;
    .header {
      background-color: #31b2b5;
      text-align: center;
      height: 44px;
      line-height: 44px;
      position: fixed;
      top: 0;
      width: 100vw;
      color: #fff;

      font-size: 26rpx;
      z-index: 9;
      .back-icon {
        position: absolute;
        left: 10px;
        top: 50%;
        transform: translateY(-50%);
        font-weight: normal;
      }
    }
    .form {
      margin: 200rpx 50rpx 0;
    }
    .btn {
      background: #31b3b5;
      width: 70vw;
      height: 40px;
      border-radius: 20px;
      font-size: 16px;
      color: #fff;
      line-height: 40px;
      text-align: center;
      margin: 100rpx auto 0;
    }
  }
  ::v-deep.uni-easyinput {
    .uni-easyinput__content-input {
      padding: 0 10px;
    }
  }
</style>
